<template>
    <div class="m-menu-item">
        <i class="iconfont" :class="item.icon" v-if="item.icon"></i>
        <span>{{item.label}}</span>
    </div>
</template>

<script>
export default {
    name: 'm-menu-item',
    props: {
        item: {
            type: Object,
            required: true,
        },
    }
}
</script>

<style lang="scss" scoped>
.m-menu-item {
    display: block;
    overflow: hidden;
    padding-left: 1.125rem;
    line-height: 50px;
    max-height: 50px;
    color: #515c6b;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
        color: #fb7299;
    }
}
</style>